<style lang="scss" scoped>
.h1 {
	color: #ff623b;
	font-size: 24rpx;
	font-weight: 400;

	width: 100%;
	padding: 0;
	background-color: #f8f8f8;
	height: 44rpx !important;
	line-height: 44rpx;
	margin-bottom: 28rpx;
	padding-left: 16rpx;
}
.bd {
	border: 1px solid red;
}
.pl8 {
	padding-left: 16rpx;
}
.mb14 {
	margin-bottom: 28rpx;
}
.mb24 {
	margin-bottom: 48rpx;
}
.pb22 {
	padding-bottom: 44rpx;
}
.pb24 {
	padding-bottom: 48rpx;
}
.mb0 {
	margin-bottom: 0 !important;
}
.mb8 {
	margin-bottom: 16rpx;
}
.mb12 {
	margin-bottom: 24rpx;
}
.mb20 {
	margin-bottom: 20px;
}
.mb32 {
	margin-bottom: 64rpx;
}
</style>
<style lang="scss" scoped></style>
<template>
	<view class="container">
		<!-- 顶部面板 -->
		<view class="top--panel"></view>
		<!-- 滚动区域 -->
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="left">
					<scroll-view
						scroll-y="true"
						:style="{ height: scrollHeight + 'px' }"
						:scroll-into-view="leftIntoView"
					>
						<view
							class="item"
							v-for="(item, index) in list"
							:key="index"
							:class="{ active: index == leftIndex }"
							:id="'left-' + index"
							:data-index="index"
							@tap="leftTap"
						>
							{{ item.name }}
						</view>
						<!-- 站位符 -->
						<view style="height: 150rpx"></view>
					</scroll-view>
				</view>
				<!-- 右边滚动 -->
				<view class="main">
					<scroll-view
						scroll-y="true"
						:style="{ height: scrollHeight + 'px' }"
						@scroll="mainScroll"
						:scroll-into-view="scrollInto"
						scroll-with-animation="true"
					>
						<view
							class="item main-item mb20"
							v-for="(info, index) in list"
							:key="index"
							:id="'item-' + index"
						>
							<view class="title" style="display: flex; justify-content: space-between">
								<view class="h1 mb12">{{ info.name }}</view>
							</view>

							<view
								class="mb12"
								:class="[index === info.majors.length - 1 ? 'mb0' : '']"
								v-for="(item, index) in info.majors"
								:key="index"
							>
								<view style="display: flex; justify-content: space-between" class="">
									<view class="titlename pl8 mb8">{{ item.name }}</view>
									<view style="font-size: 24rpx; font-weight: 400; padding-right: 22rpx; color: #ccc">
										{{ item.majors.length }}个专业
									</view>
								</view>
								<view class="titleflex pl8">
									<view
										class="titlesize"
										v-for="cur in item.majors"
										:key="cur.id"
										@tap="getMajorCellId(cur.code)"
									>
										<text>{{ cur.name }}</text>
									</view>
								</view>
							</view>
							<!-- 	<view class="box_right_item flex_r_between">
								<view class="flex-center" v-for="cur in item2.majors" :key="cur.id"
									@tap="getMajorCellId(cur.code)">
									<view class="name flex_center">
										{{ cur.name }}
									</view>
								</view>
							</view> -->
						</view>
						<view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 底部面板 -->
		<view class="bottom-panel"></view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			scrollHeight: 400,
			scrollTopSize: 0,
			fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
			leftArray: [],
			mainArray: [],
			topArr: [],
			leftIndex: 0,
			scrollInto: ''
		};
	},
	computed: {
		/* 计算左侧滚动位置定位 */
		leftIntoView() {
			return `left-${this.leftIndex > 3 ? this.leftIndex - 3 : 0}`;
		}
	},
	created() {
		console.log('list', this.list);
	},
	mounted() {
		/* 等待DOM挂载完成 */
		this.$nextTick(() => {
			/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
			setTimeout(() => {
				/* 等待滚动区域初始化完成 */
				this.initScrollView().then(() => {
					/* 获取列表数据，你的代码从此处开始 */
					this.getElementTop();
				});
			}, 200);
		});
	},
	methods: {
		// 跳转到专业详情界面
		getMajorCellId(code) {
			uni.navigateTo({
				url: '/subpackages/subpackage1/pages/searchmajor/search-major-majordetail?code=' + code
			});
		},
		/* 初始化滚动区域 */
		initScrollView() {
			return new Promise((resolve, reject) => {
				let view = uni.createSelectorQuery().in(this).select('#scroll-panel');
				view.boundingClientRect((res) => {
					this.scrollTopSize = res.top;
					this.scrollHeight = res.height;
					this.$nextTick(() => {
						resolve();
					});
				}).exec();
			});
		},
		/* 获取元素顶部信息 */
		getElementTop() {
			new Promise((resolve, reject) => {
				let view = uni.createSelectorQuery().in(this).selectAll('.main-item');
				view.boundingClientRect((data) => {
					resolve(data);
				}).exec();
			}).then((res) => {
				let topArr = res.map((item) => {
					return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
				});
				this.topArr = topArr;

				/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
				let last = res[res.length - 1].height;
				if (last - 20 < this.scrollHeight) {
					this.fillHeight = this.scrollHeight - last + 20;
				}
			});
		},
		/* 主区域滚动监听 */
		mainScroll(e) {
			let top = e.detail.scrollTop;
			let index = 0;
			/* 查找当前滚动距离 */
			for (let i = this.topArr.length - 1; i >= 0; i--) {
				/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
				if (top + 4 >= this.topArr[i]) {
					index = i;
					break;
				}
			}
			this.leftIndex = index < 0 ? 0 : index;
		},
		/* 左侧导航点击 */
		leftTap(e) {
			let index = e.currentTarget.dataset.index;
			this.leftIndex = index;
			this.scrollInto = `item-${index}`;
		}
	}
};
</script>

<style lang="scss">
page,
.container {
	height: 100%;
}

/* 容器 */
.container {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;

	& > view {
		width: 100%;
	}

	.scroll-panel {
		flex-grow: 1;
		height: 0;
		overflow: hidden;
	}

	.bottom-panel {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
}

.list-box {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	font-size: 28rpx;

	.left {
		width: 200rpx;
		background-color: #f8f8f8;
		// line-height: 60rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		font-weight: 600;

		.item {
			padding: 18rpx;
			font-size: 26rpx;
			position: relative;
			font-weight: 400;
			box-sizing: border-box;
			background-color: #f7f7f7;
			padding-top: 10px;
			padding-bottom: 10px;

			&:not(:first-child) {
				&::after {
					content: '';
					display: block;
					height: 0;
					width: 620upx;
					position: absolute;
					top: -1px;
					right: 0;
					transform: scaleY(0.5);
					/* 1px像素 */
				}
			}

			&.active {
				color: #ff3b0a;
				background-color: #fff;
				border-radius: 0 !important;
				position: relative;
				display: block;
				&::before {
					content: '';
					display: block;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					margin: auto;
					width: 6rpx;
					height: 32rpx;
					border-radius: 4upx;
					border: 1px solid red;
					background-color: #ff3b0a;
					z-index: 999999;
				}
			}
		}

		.fill-last {
			height: 0;
			width: 100%;
			background: none;
		}
	}

	.main {
		background-color: #fff;

		width: 0;
		flex-grow: 1;
		box-sizing: border-box;

		.title {
			line-height: 64rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #666;
			background-color: #fff;
			position: sticky;
			top: 0;
			z-index: 19;

			.titlename {
				font-size: 28rpx;
				color: #000;
			}
		}

		.titleflex {
			display: flex;
			align-content: flex-start; //排列格式
			align-items: center;
			flex-wrap: wrap;
			width: 100%;
			box-sizing: border-box;

			.titlesize {
				width: 40%;
				height: 80rpx;
				text-align: center;
				background-color: #f8f8f8;
				font-size: 24rpx;

				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 5rpx;
				box-sizing: border-box;
				margin-right: 24rpx;
				margin-bottom: 24rpx;
			}
		}

		.item {
		}

		.goods {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			margin-bottom: 10rpx;

			& > image {
				width: 120rpx;
				height: 120rpx;
				margin-right: 16rpx;
				margin-left: 2px;
			}

			.describe {
				font-size: 24rpx;
				color: #999;
			}

			.money {
				font-size: 24rpx;
				color: #efba21;
			}
		}
	}
}
</style>
